<template>
    <div class="ux-progress">
        <span v-text="percent"></span>
        <svg :viewBox="[0,0,size,size].join(',')">
            <circle :cx="center" :cy="center" r="100" :stroke-width="border" fill="none" />
            <path :d="trackPath" fill="none" :stroke-width="border" stroke-linecap="round" :style="circlePathStyle" />
        </svg>
    </div>
</template>
<script>
export default {
    props: {
        rate: { type: Number, default: 0 },
    },
    data () {
        return {
            radius: 100, // 半径
            border: 10, // 边框
        };
    },
    computed: {
        percent () {
            return Math.min(100, Math.max(0, Math.round(this.rate))) + '%'
        },
        size () {
            return 2 * this.radius + this.border
        },
        center () {
            return this.radius + 0.5 * this.border
        },
        // 周长
        perimeter () {
            return 2 * Math.PI * this.radius;
        },
        circlePathStyle () {
            return {
                strokeDasharray: `${this.perimeter * (this.rate / 100)}px, ${this.perimeter}px`,
                strokeDashoffset: '0px',
            };
        },

        trackPath () {
            const radius = this.radius;
            const center = this.center;
            return `M ${center} ${center} m 0 -${radius} a ${radius} ${radius} 0 1 1 0 ${radius * 2} a ${radius} ${radius} 0 1 1 0 -${radius * 2}`;
        }
    },
    methods: {

    }

};
</script>
<style lang="scss" scoped>
.ux-progress {
    width: 100px;
    height: 100px;
    position: relative;
    svg {
        width: 100%;
        height: 100%;
        path {
            stroke: #ea4c89;
            transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;
        }

        circle {
            stroke: #e5e9f2;
        }
    }
    span {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #ffffff;
        line-height: 28px;
        color: #fff;
    }
}
</style>
